<script setup>
import {fkType, fkDelete, fkList} from '@/api/fk'
import {ref} from "vue";
import {toast} from "@/hook/toast";
import {getUsers} from "@/api/user";
import {Search, Delete, FolderAdd} from '@element-plus/icons-vue'
import AddVue from './com/add.vue'
import confirm from "@/libs/confirm";
import DetailVue from './com/detail.vue'
import {delay} from "@/utils";

const tableData = ref([])
const pagination = ref({
  page: 1,
  total: 0,
  pageSize: 15,
})
const loading = ref(false)
const userList = ref([])
const formRef = ref(null)
const formData = ref({user_id: ''})
const addRef = ref(null)

async function initUser() {
  const resp = await getUsers()
  if (!resp.data) resp.data = []
  const {code, data, msg} = resp
  if (code !== 1) toast({title: msg, type: 'error'})
  userList.value = data.map(item => {
    const {id, nickname} = item
    return {value: id, label: nickname}
  })
}

initUser()
initData()

async function initData() {
  if (loading.value) return
  loading.value = true
  const {page} = pagination.value
  const {user_id} = formData.value
  const resp = await fkList({page, user_id})
  await delay(200)
  loading.value = false
  const {data, code, msg} = resp
  if (code !== 1) toast({title: msg, type: 'error'})
  if (!data.data) data.data = []
  const {total, data: list} = data
  pagination.value.total = total
  tableData.value = list
}

function handleReset() {
  formData.value.user_id = ''
  initData()
}

function addHandle(data) {
  addRef.value?.open(data)
}

function handleRemove(row) {
  confirm({
    title: '提示',
    message: '你确定删除吗?',
    confirmBtnText: '删除',
    cancelBtnText: '取消'
  }).then(async () => {
    const {id} = row
    const resp = await fkDelete({id})
    const {code, msg} = resp
    toast({title: msg, type: code > 0 ? 'success' : 'error'})
    if (code < 1) return
    await initData()
  }).catch(() => {
  })
}

const detailRef = ref(null)

function handleDetail(data) {
  detailRef.value?.open(data)
}
</script>

<template>
  <div class="technicist-kf-wrap full box relative"
       v-loading="loading"
  >
    <div class="form-wrap">
      <el-form inline
               :model="formData"
               ref="formRef"
               label-position="left"
      >
        <el-form-item label="人员" prop="user_id">
          <el-select
              v-model="formData.user_id"
              placeholder="请选择人员"
              style="width: 200px;"
          >
            <el-option
                v-for="(item,index) in userList"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-space>
            <el-button type="warning" :icon="Search" @click="initData">搜索</el-button>
            <el-button type="danger" :icon="Delete" @click="handleReset">重置</el-button>
            <el-button type="primary" :icon="FolderAdd" @click="addHandle()">添加记录</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-table
          :data="tableData"
          fit
          border
      >
        <el-table-column label="姓名" prop="jishu_user_name">
          <template #default="{row}">
            <el-button @click="handleDetail(row)" link type="primary">{{ row.jishu_user_name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="反馈类型" prop="jishu_yichang_type_name"/>
        <el-table-column label="反馈日期" prop="date"/>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-space>
              <el-button type="success" size="small" @click="handleDetail(row)">详情</el-button>
              <el-button type="danger" size="small" @click="handleRemove(row)">删除</el-button>
              <el-button type="warning" size="small" @click="addHandle(row)">编辑</el-button>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrap">
      <el-pagination
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="prev, pager, next, total"
      />
    </div>
    <add-vue ref="addRef" @success="initData"/>
    <detail-vue ref="detailRef"/>
  </div>
</template>

<style scoped lang="scss">
.form-wrap {
  padding: 16px 8px 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .045);
  margin-bottom: 16px;
}

.pagination-wrap {
  padding: 16px;
  display: flex;
  background: #fff;
  justify-content: flex-end;
}

</style>
